<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import NavBar from '../components/navbar/NavBar.vue'
import TabBar from '../components/tabbar/TabBar.vue'
import SwitchNavBar from '../components/navbar/SwitchNavBar.vue'
import { getPageConfig } from '../utils/pageConfig'

import { useAppStore } from '../store/app'
import { storeToRefs } from 'pinia';
const { theme } = storeToRefs(useAppStore());

const route = useRoute()

// 获取当前页面配置
const pageConfig = computed(() => {
  return getPageConfig(route.path)
})

// 是否显示导航栏
const showNavBar = computed(() => {
  return pageConfig.value.showNavBar
})

// 是否显示导航栏
const showSwitchNavBar = computed(() => {
  return pageConfig.value.showSwitchNavBar
})

// 是否显示底部栏
const showTabBar = computed(() => {
  return pageConfig.value.showTabBar
})

// 页面自定义类名
const customClass = computed(() => {
  return pageConfig.value.customClass || ''
})

// 页面背景色
const backgroundColor = computed(() => {
  return pageConfig.value.backgroundColor || ''
})
// 用户信息
const showUserInfo = computed(() => {
  return pageConfig.value.showUserInfo
})
// 返回按钮
const showBackIcon = computed(() => {
  return pageConfig.value.showBackIcon
})
</script>

<template>
  <div 
    class="layout"
    :class="[customClass, theme]"
    :style="backgroundColor ? { backgroundColor } : {}"
  >
    <NavBar v-if="showNavBar" :showBackIcon="showBackIcon" />
    <SwitchNavBar v-if="showSwitchNavBar" :showUserInfo="showUserInfo" />
    <main class="page-content p-4">
      <slot></slot>
    </main>
    
    <TabBar v-if="showTabBar" />
  </div>
</template>

<style scoped lang="scss">
.page-content {
  min-height: calc(100vh - 7.5rem); /* 减去导航栏和底部栏的高度 */
}
.layout {  
  background-size: 100% 100%;
}
.home-page {
  &.dark {
    background-image: url('../assets/imgs/images/index_bg_mine_dark.png');
  }
  &.light {
    background-image: url('../assets/imgs/images/index_bg_mine_light.png');
  }
}
.safe-box-page {  
  &.dark {
    background-image: url('../assets/imgs/images/index_bg_safeBox_dark.png');
  }
  &.light {
    background-image: url('../assets/imgs/images/index_bg_light.png');
  }
}
.mine-page {
  &.dark {
    background-image: url('../assets/imgs/images/index_bg_mine_dark.png');
  }
  &.light {
    background-image: url('../assets/imgs/images/index_bg_mine_light.png');
  }
}
.card-center-page {
  &.dark {
    background-image: url('../assets/imgs/images/index_bg_card_dark.png');
  }
  &.light {
    background-image: url('../assets/imgs/images/index_bg_mine_light.png');
  }
}
.card-category-page {
  &.dark {
    background-image: url('../assets/imgs/images/index_bg_cardCate_dark.png');
  }
  &.light {
    background-image: url('../assets/imgs/images/index_bg_cardCate_light.png');
  }
}
.fund-center-page {
  &.dark {
    background-image: url('../assets/imgs/images/index_bg_fundCenter_dark.png');
  }
  &.light {
    background-image: url('../assets/imgs/images/index_bg_fundCenter_light.png');
  }
}
</style>